<template>
	<view>
		<!-- 轮播图 -->
		<view class="slideshow">
			<u-swiper :list="list1"></u-swiper>
		</view>
		<!-- 分类 -->
		<view class="functionality">
			<view class="my">
				<image src="../../static/img/myautomatic.png" mode=""></image>
				<view class="">我的定投</view>
			</view>
			<view class="my">
				<image src="../../static/img/ranking.png" mode=""></image>
				<view class="">定投排行</view>
			</view>
			<view class="my">
				<image src="../../static/img/suan.png" mode=""></image>
				<view class="">定投试算</view>
			</view>
			<view class="my">
				<image src="../../static/img/ke.png" mode=""></image>
				<view class="">定投课堂</view>
			</view>
		</view>
		<!-- 广告图 -->
		<view class="photo">
			<image src="../../static/img/d5c7c955030cba66ebd17d3d5f958c3.jpg" mode=""></image>
		</view>
		<!-- 精选定投 -->
		<view class="sift">
			<view class="sift-title">精选定投</view>
			<view class="content" v-for="(item,index) in arr" :key="index" @click="particulars(item.name)">
				<view class="content-left">
					<text>{{item.recent}}</text>
					<text>{{item.dayday}}</text>
				</view>
				<view class="content-right">
					<text>{{item.name}}</text>
					<text>{{item.details}}</text>
				</view>
			</view>
		</view>
		<!-- 定投课堂 -->
		<view class="classroom">
			<view class="classroom-title">
				<text>定投课堂</text>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
			<view class="classroom-conten">
				<view class="time">
					<view class="">基金投资为什么要选择定投？</view>
					<view class="">2023-08-17</view>
				</view>
				<image src="../../static/img/ddd7409f0cf9f96510535d45f8fa0d7.jpg" mode=""></image>
			</view>
			<view class="classroom-top">
				<view class="time">
					<view class="">如何选择定投的基金类型</view>
					<view class="">2023-08-17</view>
				</view>
				<image src="../../static/img/5e7ba8991fa9d41233a0255cea132e7.jpg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		plan,
		details
	} from "../../API/foodShop.js"
	export default {
		data() {
			return {
				list1: [{
						image: '../../static/img/pink.jpg'
					},
					{
						image: '../../static/img/pink1.jpg'
					}
				],
				arr: []
			}
		},
		methods: {
			// 精选定投的接口
			fun() {
				plan().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data);
						this.arr = res.data.data
					} else {
						console.log(1111);
					}
				}).catch((Error) => {
					console.log(Error);
				})
			},
			// 实现一进页面渲染
			onShow() {
				this.fun()
			},
			// 跳转基金详情并且接口
			particulars(name) {
				console.log(name);
				uni.request({
					url: "http://172.16.105.51:8000/particulars",
					method: "POST",
					data: {
						selectedName: name
					},
					header: {
						"Content-Type": "application/json",
					},
					success: (res) => {
						console.log(res.data[0]);
						uni.navigateTo({
							url: "/pages/fundDetails/fundDetails?arr=" + JSON.stringify(res.data[0])
						})
					}, // 假设结果的建为"serve'
					fail: (error) => {
						console.error("Error:", error)
					},
				})
			}
		}
	}
</script>

<style scoped>
	.slideshow {
		padding: 40rpx;
	}

	.functionality {
		display: flex;
		justify-content: space-evenly;
	}

	.functionality image {
		width: 50rpx;
		height: 50rpx;
	}

	.my {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.my view {
		margin-top: 20rpx;
	}

	/* 广告图 */
	.photo {
		margin-top: 40rpx;
		padding: 0rpx 40rpx;
	}

	.photo image {
		width: 100%;
		height: 300rpx;
	}

	/* 精选定投 */
	.sift {
		height: 450rpx;
		/* background-color: aqua; */
		padding: 20rpx 40rpx;
	}

	.sift-title {
		font-size: 38rpx;
		font-weight: 600;
	}

	.content {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between
	}

	.content-left,
	.content-right {
		display: flex;
		flex-direction: column;
	}

	.content-left text:nth-child(1) {
		font-size: 40rpx;
		color: red;
	}

	.content-right text:nth-child(1) {
		font-size: 40rpx;
		/* 省略号 */
		width: 300rpx;
		white-space: nowrap;
		/* 修正属性名为 nowrap */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 修正属性名为 ellipsis */
		max-width: 300rpx;
		/* 添加最大宽度 */
		margin-right: 40rpx;
	}

	.content-left text:nth-child(2) {
		color: #676767;
		margin-top: 10rpx;
	}

	.content-right text:nth-child(2) {
		color: #676767;
		margin-top: 10rpx;
	}

	/* 定投课堂 */
	.classroom {
		padding: 0rpx 40rpx;
	}

	.classroom-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 38rpx;
		font-weight: 600;
	}

	.classroom-title image {
		width: 60rpx;
		height: 60rpx;
	}

	.classroom-conten,
	.classroom-top {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}


	.time {
		display: flex;
		justify-content: space-between;
		flex-direction: column;

	}

	.time view:nth-child(1) {
		font-size: 30rpx;
	}

	.classroom-conten image {
		width: 200rpx;
		height: 140rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.classroom-top image {
		width: 200rpx;
		height: 140rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
</style>